<template>
	<view class="popup">
		<view v-if="3 == payType">
			<view class="title"> 为什么要支付 </view>
			<view class="tip"> 为过滤非诚意用户，避免微商，酒托，广告等骚扰，打造纯净私密的交友空间，保证产品持续稳定运营。需支付一定费用，成为会员 </view>
		</view>
		<view v-if="2 == payType">
			<view class="title"> 选择支付方式 </view>
		</view>

		<view class="price"> ￥{{price}} </view>
		<view class="type" v-for="(item, index) in payTypes" :key="index" @click="onItemPay(index)">
			<image :src="item.icon"></image>
			<view class="tip">{{item.title}}</view>
			<image :src="item.checked?getImageUrl('ic_checked.png'): getImageUrl('ic_uncheck.png')"
				style="width: 40rpx;" mode="widthFix"></image>
		</view>

		<view class="btn" @click="requestPay">确定支付</view>
	</view>
</template>

<script>
import CacheUtil from '../../main/common/CacheUtil';
	export default {
		name: "pay",
		data() {
			return {
				payTypes: [{
						payType: 1,
						icon: this.getImageUrl('pay_alipay.png'),
						title: '支付宝支付',
						checked: false
					},
					{
						payType: 2,
						icon: this.getImageUrl('pay_wechat.png'),
						title: '微信支付',
						checked: false
					},
				],
				price: this.payMoney,
				packageId: this.payId,
			};
		},
		props: {
			payType: {
				type: String, //支付类型:1.钻石充值; 2.vip ; 3.门票
			},
			payMoney: {
				type: Number,
			},
			payId: {
				type: Number,
			}
		},
		beforeMount(){
			this.requestTicketPrice()
		},
		methods: {
			onItemPay(index) {
				this.payTypes.forEach(item => {
					item.checked = false
				});
				this.payTypes[index].checked = true;
			},
			requestTicketPrice(){
				if(3 == this.payType){
					uni.$http.get("/api/ticketPackage/list").then(res=>{
						let ticket = ticketRes.data[0]
						this.price = ticket.money;
						this.packageId = ticket.id;
					})
				}
			},
			requestPay() {
				let payType = '';
				this.payTypes.forEach(item => {
					if (item.checked) {
						payType = item.payType;
					}
				});
				if (!payType) {
					uni.$toast.showToast('请选择支付类型')
					return
				}

				// #ifdef MP-WEIXIN
				this.requestMpWeixinPay();
				// #endif
				// #ifdef APP-PLUS || H5
				this.requestAppPay(payType);
				// #endif
			},
			requestAppPay(payType) {
				let url = '/api/aliPay/tradeWapPay';
				if (2 == payType) {
					url = '/api/wxPay/transactions';
				}
				const params = {
					userId: CacheUtil.getUserId(),
					projectType: this.payType, //支付类型1 (钻石充值)  支付类型2  （会员充值）
					packageId: this.packageId,
					type: 1, //1.h5;2.小程序
				}
				uni.$http.post(url, params).then(res=>{
					this.$emit('close') //通知关闭
					let payUrl = res.data.payUrl;
					if (2 == payType) {
						payUrl = res.data.webPay.payUrl;
					}
					const webview = plus.webview.create('', 'custom-webview');
					webview.loadURL(payUrl, {
						'Referer': 'http://api.ptszyxx.com'
					});
				})
			},
			requestMpWeixinPay() {
				console.log('小程序支付');
				let params = {
					userId: uni.getStorageSync('userId'),
					projectType: '2', //支付类型1 (钻石充值)  支付类型2  （会员充值）
					packageId: this.packageId,
					type: 2, //1.h5;2.小程序
					openid: uni.getSorageSync('openId'),
					appId: 'wx035a601976c258cc',
				}
				uni.$http.post('/api/wxPay/transactions', params).then(res=>{
					wx.requestPayment({
						"timeStamp": res.data.data.timeStamp,
						"nonceStr": res.data.data.nonceStr,
						"package": res.data.data.package,
						"signType": res.data.data.signType,
						"paySign": res.data.data.paySign,
						"success": (res) => {
							console.log("小程序支付成功: " + JSON.stringify(res));
							uni.$toast.showToast('会员开通成功')
						},
						"fail": function(res) {
							console.log("小程序支付失败: " + JSON.stringify(res));
						},
					})
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		width: 100wh;
		height: 550rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			color: #222;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
		}

		.tip {
			font-size: 20rpx;
			color: #888;
		}

		.price {
			font-size: 50rpx;
			color: mediumvioletred;
			text-align: center;
		}

		.type {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			color: #222;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tip {
				font-size: 28rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}

		}

		.btn {
			box-sizing: border-box;
			background-image: linear-gradient(to right, #9fe9ff, #ab7aff);
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: white;
		}

	}
</style>